<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // 介绍Promise的基本使用方式
      // Promise是异步任务的一种解决方式
      // Promise对象拥有两个属性：1.Promise的状态PromiseState。2.Promise的结果PromiseResult
      // Promise的状态PromiseState:1.fulfilled成功 （resolved)2.rejected失败 3.pending等待
      // Promise的结果PromiseResult传入的参数
      // const p = new Promise((resolve, reject) => {
      //   resolve('我是成功的结果')
      //   // reject('我是失败的结果')
      // })

      // console.log(p)

      //在创建一个Promise对象时可以传入需要执行的函数
      const p = new Promise((resolve, reject) => {
        console.log(2)
        // const xhr = new XMLHttpRequest()
        // xhr.open()
        // xhr.send()
        // xhr.onreadystatechange = function () {
        //   //成功
        //   resolve(JSON.parse(xhr.responseText))
        //   //失败
        //   reject(JSON.parse(xhr.responseText))
        // }
        // resolve和reject能够改变promise对象的状态
        // 调用resolve可以将promise对象的状态改为成功
        // promise对象的结果根据传入的参数
        // resolve('校长天下第一')
        // 调用reject可以将promise对象的状态改为失败
        // promise对象的结果根据传入的参数
        reject('我是失败的原因')
        // console.log(1)
        // console.log(2)
      })

      console.log(p)

      //如果想要使用promise对象的结果，只能使用then方法才可以
      //then方法接受的第一个参数成功的回调函数,回调函数会接受promise对象的成功的结果
      //then方法接受的第二个参数是失败的回调函数，回调函数会接收promise对象的失败的结果

      //catch可以捕获错误，失败态会调用catch方法

      //finally 无论是成功还是失败都会进finally

      p.then(
        // 第一个参数：成功的回调函数
        (res) => {
          console.log('我是成功的回调函数')
          console.log(res)
        }
        // // 第二个参数：失败的回调函数
        // (error) => {
        //   console.log('我是失败的回调函数')
        //   console.log(error)
        // }
      )
        .catch((error) => {
          console.log('我是catch的回调函数')
          console.log(error)
        })
        .finally(() => {
          console.log('我是finally')
        })

      console.log(1)
    </script>
  </body>
</html>
